<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>mamma</title>
<!-- 제일 처음에 볼 수 있는 mamma 소개 페이지입니다 -->
<script src="js/jquery-2.1.1.js"></script>
<script src="js/jquery.scrollify.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
var width = $(window).width();
var height = $(window).height();

$(function() {	
	$(".panel").css("width", width);
	$("img").css('width', width);
	$.scrollify({ section : ".panel" });
	
	$(".section4_button").on('click', function(){
		location.href = "jinkyu/goLoginPage.action";
	});
});

$(document).ready(function(){
	$('div.section1_explain').css('top', height/2 +'px');
	$('div.section1_explain').css('left', (width/2 - width/4) +'px');
	
	$('div.section2_explain').css('top', (height + height/2) +'px');
	$('div.section2_explain').css('left', (width/2 - width/4) +'px');
	
	$('div.section3_explain').css('top', (height*2 + height/2) +'px');
	$('div.section3_explain').css('left', (width/2 - width/4) +'px');
	
	$('div.section4_explain').css('top', (height*3 + height/2 - 100) +'px');
	$('div.section4_explain').css('left', (width/2 - width/4) +'px');
});
</script>
<style>
body { overflow: hidden; }
img { opacity: .4; }
h1 { display: none; }
.section1 { top: 0; }
.section2 {	top: 100%; }
.section3 { top: 200%; }
.section4 {	top: 300%; }

section {
	position: absolute;
	left: 0;
	overflow: hidden;
	background-color: black;
}

div {
	z-index: 10;
	position: absolute;
	font-size: 25pt;
	color: white;
	width: 50%;
	height: 30pt;
	font-weight: bold;
}

div.section1_explain { text-align: center; }
div.section2_explain { text-align: left; }
div.section3_explain { text-align: right; }
div.section4_explain { text-align: center; }

input.section4_button {
	height: 50px;
	width: 300px;
	font-size: 18pt;
	cursor: pointer;
	font-weight: bold;
	background: #ffaf4b; /* Old browsers */
	background: -moz-linear-gradient(top, #ffaf4b 0%, #ff920a 100%);
	/* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffaf4b),
		color-stop(100%, #ff920a)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffaf4b 0%, #ff920a 100%);
	/* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffaf4b 0%, #ff920a 100%);
	/* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ffaf4b 0%, #ff920a 100%);
	/* IE10+ */
	background: linear-gradient(to bottom, #ffaf4b 0%, #ff920a 100%);
	/* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf4b',
		endColorstr='#ff920a', GradientType=0); /* IE6-9 */
	border: 0;
}
</style>
</head>
<body>
<h1>[ INDEX ]</h1>
<div class="section1_explain">소중한 아이를 위한 기록, mamma.</div>
<div class="section2_explain">사랑하는<br>사람들과<br>함께 나누는<br>잊지 못할 순간들의 기억</div>
<div class="section3_explain">매일매일<br>자라는<br>아이의 성장과정을<br>함께 기록하고 나눠보아요.</div>
<div class="section4_explain">
	지금<br>소중한 기억 공간을<br>만들어 볼까요?<br><br>
	<input class="section4_button" type="button" value="시작하기"></input>
</div>

<section class="panel section1" data-section-name="section1">
<img src="image/index/index01.jpg" />
</section>

<section class="panel section2" data-section-name="section2">
<img src="image/index/index02.jpg" />
</section>

<section class="panel section3" data-section-name="section3">
<img src="image/index/index03.jpg" />
</section>

<section class="panel section4" data-section-name="section4">
<img src="image/index/index04.jpg" />
</section>

</body>
</html>